<script setup>
import {onMounted} from 'vue';
import { Tile } from "ol/layer";
import { OSM } from "ol/source";
import { View,Map } from "ol";
import { XYZ } from "ol/source.js";

onMounted(() => {
  const left = new Map({
    target: 'left',
    layers: [
      new Tile({
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
          // 是否横向重复
          wrapX: false
        })
      })
    ],
    //配置视图
    view: new View({
      center: [113.24981689453125, 23.126468438108688], //视图中心位置
      projection: "EPSG:4326", //指定投影
      zoom: 12   //缩放到的级别
    })
  })

  const right = new Map({
    target: 'right',
    layers: [
      new Tile({
        title:"天地图路网",
        crossOrigin:"anonymous",
        wrapX:false,
        source: new XYZ({
          url: 'https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d30d1c34260f2edc72b25f9985e2fd69',
        }),
      }),

      new Tile({
        title: "天地图文字标注",
        attributions:"天地图的属性描述",
        wrapX: false,
        source: new XYZ({
          url: 'https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=d30d1c34260f2edc72b25f9985e2fd69'
        }),
      })
    ],
    view: left.getView() //共享视图
  })
})
</script>

<template>
  <div id="map">
    <div id="left">
    </div>
    <div id="right">
    </div>
  </div>
</template>

<style scoped>
#map {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}
#left{
  width: 50%;
  height: 100%;
}
#right{
  width: 50%;
  height: 100%;
}
</style>